<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import axios from 'axios';

const store = useStore();
const router = useRouter();

const form = reactive({
  username: '',
  password: ''
});

const mockLoginApi = async (username: string, password: string) => {
  const res = await axios.post('http://localhost:3000/login', { username, password });
  return res.data;
};

const handleLogin = async () => {
  const { code, data,user } = await mockLoginApi(form.username, form.password);
  if (code === 200) {
    // 存储用户信息
    store.commit('setUserInfo', user);
    // 获取该角色的权限列表
    const permissionRes = await axios.get(`http://localhost:3000/role-permissions/${data.role_id}`);
    // 存储权限到 Vuex
    store.commit('setUserPermissions', permissionRes.data.data);
    // 跳转主页
    router.push('/home');
  }else{
    alert('用户名或密码错误');
  }
};
const handleAdminLogin = () => {
  form.username = 'admin';
  form.password = 'admin123';
}
const handleUserLogin = () => {
  form.username = 'teacher_li';
  form.password = 'teach123';

}
</script>

<template>
  <div class="login-container">
    <h2>用户登录</h2>
    <el-input v-model="form.username" placeholder="用户名" style="margin-bottom: 10px;" />
    <el-input v-model="form.password" type="password" placeholder="密码" style="margin-bottom: 10px;" />
    <el-button type="primary" @click="handleLogin">登录</el-button>
    <el-button type="primary" @click="handleAdminLogin">系统管理员</el-button>
    <el-button type="primary" @click="handleUserLogin">教师</el-button>
  </div>
</template>

<style scoped>
/* 整体容器：垂直居中 + 提升质感 */
.login-container {
  max-width: 380px;
  margin: 0 auto;
  padding: 30px 40px;
  border-radius: 8px;
  border: 1px solid #ebedf0;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-align: center;
  /* 垂直居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 标题：增加层次感 */
h2 {
  color: #303133;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
}

/* 输入框：优化边框和聚焦效果 */
.el-input {
  margin-bottom: 18px;
}
.el-input__inner {
  height: 44px;
  border-radius: 6px;
  border-color: #dcdfe6;
}
.el-input__inner:hover {
  border-color: #c0c4cc;
}
.el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 按钮组：优化排列和间距 */
.el-button {
  width: 100%;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 6px;
}
/* 区分主登录按钮与快捷登录按钮 */
.el-button.primary {
  background: #409eff;
  border-color: #409eff;
}
.el-button:not(.primary) {
  background: #f8f9fa;
  color: #606266;
  border-color: #dcdfe6;
}
.el-button:not(.primary):hover {
  background: #f0f2f5;
  border-color: #c0c4cc;
}
</style>